<template>
  <page-meta :root-font-size="fontsize" class="service-list">
    <xlNavBar title="餐饮服务商" bgc="ff9d49" :showLeft="true"></xlNavBar>
    <view class="sl-header">
      <u-tabs
        :list="tabList"
        lineColor="#ff9d49"
        :current="currentTab"
        :activeStyle="{
          fontSize: '16px',
          fontWeight: '600',
          color: '#ff9d49'
        }"
        :inactiveStyle="{ fontSize: '14px' }"
        @change="handleTabChange"
      ></u-tabs>
      <view class="h-filter">
        <view
          class="h-f-area"
          v-if="currentTab !== 1"
          @click="handleCityFilter"
        >
          {{ getSelectCity[0]["fullname"] || "全国"
          }}{{ getSelectCity.length ? "·" + getSelectCity.length : "" }}
          <i class="iconfont cyyouxia"></i>
        </view>
      </view>
    </view>

    <!-- <template v-if="dataList.length > 0"> -->
    <scroll-view class="sl-content" scroll-y @scrolltolower="handlePullLoad">
      <ServiceData
        v-for="item in dataList"
        :serviceImage="getImages(item.store_image)"
        :serviceInfo="item"
        :key="item.id"
      ></ServiceData>
    </scroll-view>
    <!-- </template>
    <view v-else class="sl-null">
      <img class="image" src="https://canyinxinxi.cn/system_work/data-null.png" mode="scaleToFill" />
      <view class="info">抱歉，暂无服务商信息～</view>
    </view> -->

    <SelectCityPopup
      v-if="showCityPopup"
      type="select"
      @getData="getCityInfo"
      :max="3"
      :show="showCityPopup"
      @submit="submitCityInfo"
    ></SelectCityPopup>
  </page-meta>
</template>

<script>
import { mapGetters } from "vuex";
import SelectCityPopup from "./components/SelectCityPopup.vue";
import ServiceData from "./components/ServiceData.vue";

export default {
  name: "ServiceList",
  data() {
    return {
      fontsize: "",
      currentTab: 0,
      finish: false,
      tabList: [
        {
          name: "推荐",
          type: 1
        },
        {
          name: "最新",
          type: 2
        }
      ],
      showCityPopup: false,
      serviceType: "",
      dataList: [
        {
          id: 43,
          monthly_rent: 5000,
          store_area: 50,
          store_address: "北京市东城区北新桥街道",
          is_transfer_fee: 1,
          is_show_transfer_fee: 0,
          transfer_fee: 0,
          contact_phone: "13134356777",
          store_highlight: "测试一下啊",
          store_image:
            "https://www.test.canyinxinxi.com/dist_img/292_1690552709767037759.tmp_6bacc7da259718d28bfe5a89c56e47b75356fe62d982eaff.jpg",
          is_top: false,
          status: 1,
          user_id: 292,
          refresh_time: 1690552884,
          create_at: "2023-07-28T21:50:53.241Z",
          update_at: "2023-07-28T22:01:24.299Z",
          longitude: 116.424497,
          latitude: 39.942497,
          first_area_id: 110000,
          second_area_id: 110101,
          third_area_id: 110101005,
          first_area_des: "北京市",
          second_area_des: "东城区",
          third_area_des: "北新桥街道",
          four_area_des: "桃园街道",
          top_hour: 0,
          is_buy_top: false,
          fail_reason: "",
          distance: 919.38,
          show_time: "07-28 22:01",
          user_name: "",
          is_collect: false,
          buy_time: ""
        }
      ],
      searchParam: {
        request_id: "",
        type: 1,
        filter: {
          city_codes: "",
          store_area: "",
          distance: null
        },
        longitude: null,
        latitude: null,
        page_size: 5,
        page_num: 1
      },
      total: 0
    };
  },
  components: {
    SelectCityPopup,
    ServiceData
  },
  computed: {
    ...mapGetters("location", [
      "getSelectCity",
      "getCurProvince",
      "getUserLocationInfo"
    ]),
    ...mapGetters("user", ["getUserStatus"])
  },
  onLoad() {
    let designWidth = 37.5;
    uni.onWindowResize((res) => {
      this.fontsize =
        Math.floor((1.5 * res.size.windowWidth) / designWidth) + "px";
    });
    uni.getSystemInfo({
      success: (res) => {
        this.fontsize =
          Math.floor((1.5 * res.screenWidth) / designWidth) + "px";
      }
    });

    if (this.getSelectCity) {
      let city_codes = this.getSelectCity.map((item) => {
        return item.id;
      });

      this.searchParam.filter.city_codes = city_codes.join(",");
    }

    // this.getList();
  },
  methods: {
    async getList() {
      if (this.finish) return;
      if (this.searchParam.page_num === 1) {
        this.dataList = [];
      }
      let res = await this.$http.requestSync(
        "/storefronts/list",
        this.searchParam
      );
      if (res.code === 200) {
        if (!res.storefronts) {
          return;
        }
        let storefronts = res.storefronts.map((item) => {
          return {
            ...item,
            store_image: item.store_image
              ? item.store_image.indexOf(",") > -1
                ? item.store_image.split(",")
                : [item.store_image]
              : []
          };
        });
        this.dataList = [...this.dataList, ...storefronts];
        this.total = res.total;

        if (this.dataList.length === this.total) {
          this.finish = true;
        }
      } else {
        this.$layer.message(res.message);
        this.dataList = [];
        this.total = 0;
      }
    },
    getImages(str) {
      return str
        ? str.indexOf(",") > -1
          ? str.split(",")
          : [str]
        : [];
    },
    handlePullLoad() {
      if (this.dataList.length === 0) {
        return;
      }
      if (this.total > this.dataList.length) {
        this.searchParam.page_num = this.searchParam.page_num + 1;
        // this.getList();
      }
    },
    handleTabChange(tab) {
      this.finish = false;
      this.currentTab = tab.index;
      if (tab.index === 1) {
        this.searchParam.filter.city_codes = "";
        this.searchParam.filter.distance = 10000;
        let userLocationInfo = this.getUserLocationInfo;
        this.searchParam.longitude = userLocationInfo.ad_info.location.lng;
        this.searchParam.latitude = userLocationInfo.ad_info.location.lat;
      } else {
        let city_codes = this.getSelectCity.map((item) => item.id);
        this.searchParam.filter.city_codes = city_codes.join(",");
        this.searchParam.filter.distance = null;
        this.searchParam.longitude = null;
        this.searchParam.latitude = null;
      }

      this.searchParam.type = this.tabList[tab.index].type;
      this.searchParam.page_num = 1;

      // this.getList();
    },
    previewImage(index, imageList) {
      uni.previewImage({
        current: index,
        urls: imageList
      });
    },
    handleCityFilter() {
      this.showCityPopup = true;
    },
    getCityInfo(data) {
      this.finish = false;
      this.showCityPopup = false;
      let city_codes = data.map((item) => item.id);
      this.searchParam.filter.city_codes = city_codes.join(",");
      this.searchParam.longitude = null;
      this.searchParam.latitude = null;
      this.searchParam.page_num = 1;
      // this.getList();
    },
    submitCityInfo() {
      this.showCityPopup = false;
    },
    handleStoreDetail(id) {
      this.$togo("/shopPackage/storeDetail?id=" + id);
    },
    manageStore() {
      this.$throttle(() => {
        this.$checkLogin(() => {
          this.$togo("/shopPackage/manageStore");
        });
      });
    },
    publishStore() {
      this.$throttle(() => {
        this.$checkLogin(() => {
          this.$togo("/shopPackage/publishStore");
        });
      });
    }
  }
};
</script>

<style scoped lang="scss">
.service-list {
  height: 100vh;
  background: #fff;
  display: block;
  .sl-header {
    display: flex;
    justify-content: space-between;
    background: linear-gradient(180deg, #efefef 0%, #f7f7f7 100%);
    .h-filter {
      display: flex;
      align-items: center;
      .h-f-distance,
      .h-f-area {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 24px;
        padding: 0 10px;
        background: #e8e8e8;
        border-radius: 4px;
        font-size: 12px;
        color: #999999;
        margin-right: 10px;
        .iconfont {
          position: absolute;
          right: 4px;
          bottom: 4px;
          font-size: 6px;
          width: 6px;
          height: 6px;
        }
      }
    }
  }
  .sl-content {
    height: calc(100vh - 116px);
    width: 100%;
    box-sizing: border-box;
    padding: 15px 10px 0;
    display: flex;
    flex-direction: column;
  }
  .sl-null {
    display: flex;
    flex-direction: column;
    align-items: center;
    .image {
      margin-top: 100px;
      width: 180px;
      height: 180px;
    }
    .info {
      margin-top: 10px;
      color: #999999;
    }
  }
  .sl-operate {
    width: 100%;
    display: flex;
    justify-content: center;
    position: fixed;
    z-index: 8;
    bottom: 58px;
    .image,
    image,
    uni-image {
      width: 174px;
      height: 70px;
    }
    .close {
      position: absolute;
      right: calc(50% - 66px);
      top: -16px;
      z-index: 9;
      width: 19px;
      height: 19px;
    }
  }
  .area-popup {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 25px 16px;
    .ap-header {
      width: 100%;
      display: flex;
      justify-content: space-between;
      font-size: 16px;
      .title {
        font-weight: 600;
        color: #333333;
      }
      .operate {
        color: #2c9cfd;
      }
    }
    .ap-content {
      display: flex;
      flex: 1;
      flex-direction: column;
      margin-top: 20px;
      padding: 0 10px;
      .option {
        text-align: center;
        line-height: 48px;
        color: #999999;
        font-size: 16px;
        &.option-active {
          font-size: 20px;
          font-weight: 600;
          color: #2c9cfd;
          border-radius: 6px;
          background: rgba(44, 156, 253, 0.1);
        }
      }
    }
  }
}
</style>
